Rendering transparent objects

Transparent objects must be rendered from back to front, because visualization of transparent objects relies on having proper data behind them, in order to solve the blending equations properly.

When not rendered in a correct way, transparent objects can waste a lot of resources. If a transparent object is drawn before the underlying opaque object, the transparent object has to be drawn again after the opaque object. This means that because of the overdraw, those pixels are drawn three times. This is always the case when the objects are presented in a front-to-back order.

For these reasons always render all transparent objects after the rest of the scene is rendered.

Using a translucent Viewport Layer

By default Kanzi treats a Viewport Layer as opaque. When you want to use a translucent Viewport Layer, to get the correct rendering result, in the Project select the Viewport Layer, and in the Properties add and set the Layer Foreground Hint property to Translucent.

Rendering transparent objects using tags

You can render only transparent objects after marking all such objects with a specific tag. See Using tag filters.

Rendering transparent objects using filters

To render transparent objects using filters:

  1. In the Project select all objects, in the Properties select Add Properties, and add the Blend Mode property to all objects. Set the Blend Mode property value for opaque objects to Opaque, and for transparent objects to one of the transparent options.
    For example, set the value of Blend Mode to Alpha: Premultiplied.
  2. In the Library right-click Composing > Pipeline and select Create > Property Is Equal Filter.
    Use this filter to include all transparent objects.
    For example, name this filter Transparent objects.
  3. In the Properties set the following properties:
    • Property Type to Blend Mode
    • Operation to Include
    • Blend Mode to the value you set earlier for all transparent objects.
      For example, Alpha: Premultiplied.
  4. In the Library right-click Composing > Pipeline and select Create > Property Is Equal Filter.
    Use this filter to include all opaque objects.
    For example, name this filter Opaque objects.
  5. In the Properties set the following properties:
    • Property Type to Blend Mode
    • Operation to Include
    • Blend Mode to Opaque.
  6. In the Library right-click Composing > Composers, and in the composer which you use to render your scene create two render passes by selecting Create > Render Pass.
    You need one render pass to render the transparent objects and one to render the opaque objects.
  7. Select the render pass for rendering transparent objects and in the Properties set the following properties:
    • Object Source to the Property Is Equal Filter that includes all transparent objects.
      For example, Transparent objects.
    • Enable the Clear Enabled property.
  8. Select the render pass for rendering opaque objects and in the Properties set the following properties:
    • Object Source to the Property Is Equal Filter that includes all opaque objects.
      For example, Opaque objects.
    • Disable the Clear Enabled property.

The opaque objects are rendered first followed by the transparent objects. Note that while designers often prefer to use render passes for generating a scene from back-to-front order (that is, first the background), to avoid overdraw in real-time rendering you must reverse the order for render passes.

See also

Rendering best practices

Partial rendering

Optimizing rendering of layouts

Setting layers for efficient rendering

Preventing overdraw with sorting filters

Using tag filters

Rendering static content

Measuring the performance of your Kanzi application

Best practices

Open topic with navigation